<template>
  <div>
    <h1>EventTest组件</h1>
    <!-- 
      原生dom事件用在html和标签身上和组件标签身上的区别
      原生dom事件如果在html标签身上就是原生dom事件
                    在组件标签身上就不在是原生的dom事件了 就变成自定义事件了
                    也想在组件标签身上用原生dom事件 需要添加.native
                    事件最终是添加给子组件的根元素,形成事件委派

    -->
    <button @click="test($event)">test</button>
    <Event1 @click.native="test2">test2</Event1>
    <!-- 
        自定义事件用在html标签身上和组件身上的区别
          自定义事件添加到原生dom事件身上 无意义
          以后html身上添加事件只能是原生的dom事件 
          组件标签身上添加都是自定义事件
            如果事件名是原生dom事件名.那么可以变为原生的dom事件,添加.native
            如果事件名不是原生的dom事件名,那么就是自定义事件
            父组件传自定义事件给子组件 子组件触发$emit('事件名',参数)
            如果带参数 就是这个参数 如果没有 则是undefined

     -->
    <button @xxx='test3'>test3</button>
    <Event2 @click="test4($event)" @xxx="test4"></Event2>
  </div>
</template>

<script type="text/ecmascript-6">
import Event1 from "./Event1.vue";
import Event2 from "./Event2.vue";

export default {
  name: "EventTest",

  components: {
    Event1,
    Event2
  },

  methods: {
    test(event) {
      console.log(event.target.innerHTML);
    },
    test2(event) {
      console.log(event.target.innerHTML);
    },
    test3(event){
        console.log(event.target.innerHTML);
    },
    test4(event){
      //参数event 不是事件对象 表示第二个传递的参数
      console.log(event);
    }
  }
};
</script>
